<template>
	<div class="layout-main">
		<div class="section section-filter">
			<div class="panel-title">
				<span class="title">筛选条件</span>
			</div>
			<div class="panel-content">
				<el-form ref="tableData.filter" :inline="true" :model="tableData.filter">
					<el-form-item label="线索作废时间" prop="adate">
						<el-date-picker v-model="tableData.filter.adate" value-format="yyyy-MM-dd" type="date" placeholder="请选择线索作废时间"></el-date-picker>
					</el-form-item>
					<el-form-item label="编号" prop="clueCode">
						<el-input v-model="tableData.filter.clueCode" placeholder="请输入编号"></el-input>
					</el-form-item>
					<el-form-item label="来源渠道" prop="sourceType">
						<el-select v-model="tableData.filter.source" placeholder="请选择来源渠道">
							<el-option label="所有" value=""></el-option>
							<el-option v-for="item in dicts.sourceType" :key="item.id" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="产品类型" prop="product">
						<el-select v-model="tableData.filter.product" placeholder="请选择产品类型">
							<el-option label="所有" value=""></el-option>
							<el-option v-for="item in dicts.productType" :key="item.id" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="举报人姓名" prop="reflectName">
						<el-input v-model="tableData.filter.reflectName" placeholder="请输入举报人姓名"></el-input>
					</el-form-item>
					<el-form-item label="举报人手机号" prop="reflectPhone">
						<el-input v-model="tableData.filter.reflectPhone" placeholder="请输入举报人手机号"></el-input>
					</el-form-item>
					<el-form-item label="被举报人姓名" prop="beReportedName">
						<el-input v-model="tableData.filter.beReportedName" placeholder="请输入被举报人姓名"></el-input>
					</el-form-item>
					<el-form-item label="被举报人手机号" prop="beReportedPhone">
						<el-input v-model="tableData.filter.beReportedPhone" placeholder="请输入被举报人手机号"></el-input>
					</el-form-item>
					<!-- <el-form-item label="被举报人所属公司" prop="beReportedOrg">
					<el-input v-model="tableData.filter.beReportedOrg" placeholder="请输入被举报人所属公司"></el-input>
					</el-form-item> -->
						<!-- <el-form-item label="作废操作人" prop="areator">
						<el-input v-model="tableData.filter.areator" placeholder="请输入作废操作人"></el-input>
					</el-form-item> -->
					<el-form-item label="关键字">
						<el-input v-model="tableData.filter.keyword" title="请输入举报人或者被举报人或者手机号或者身份证" placeholder="请输入关键字"></el-input>
					</el-form-item>

				</el-form>
				<div class="form-btn">
					<button @click.prevent="sumbitSave">筛选</button>
					<button class="btn-reset" @click.prevent="reset">重置</button>
				</div>
			</div>
		</div>
		<div class="section section-table">
			<div class="panel-title">
				<span class="title">筛选结果</span>
			</div>
			<div class="panel-content">
				<el-table border :data="tableData.data" tooltip-effect="dark" style="width: 100%">
					<el-table-column fixed="right" label="操作" width="60">
						<template slot-scope="scope">
							<permission permission-key="clue:queryAbolishClueById">
								<router-link :to="{ path: '/clue/detail', query: { id: scope.row.id }}">详情</router-link>
							</permission>
						</template>
					</el-table-column>
					<el-table-column prop="clueCode" label="编号" width="218"></el-table-column>
					<el-table-column label="线索获取时间" width="155">
						<template slot-scope="scope">{{ filter.formatDate(scope.row.clueDate) }}</template>
					</el-table-column>
					<el-table-column label="线索创建时间" width="155">
						<template slot-scope="scope">{{ filter.formatDate(scope.row.cdate) }}</template>
					</el-table-column>
					<el-table-column label="线索作废时间" width="155">
						<template slot-scope="scope">{{ filter.formatDate(scope.row.adate) }}</template>
					</el-table-column>
					<el-table-column label="来源渠道" width="108">
						<template slot-scope="scope">{{ filter.filterType.sourceType(scope.row.source) }}</template>
					</el-table-column>
					<el-table-column label="产品类型" width="100">
						<template slot-scope="scope">{{ filter.filterType.sourceType(scope.row.product) }}</template>
					</el-table-column>
					<el-table-column prop="reflectName" label="举报人姓名" width="100"></el-table-column>
					<el-table-column prop="reflectPhone" label="举报人手机号" width="120"></el-table-column>
					<el-table-column prop="salesDaptName" label="举报人所属营业部" width="150"></el-table-column>
					<!-- <el-table-column prop="customerManager" label="举报人当前客户经理" width="150"></el-table-column> -->
					<el-table-column prop="beReportedName" label="被举报人姓名" width="105"></el-table-column>
					<el-table-column prop="beReportedPhone" label="被举报人手机号" width="140"></el-table-column>
					<el-table-column prop="beReportedBusiness" label="被举报人所属营业部" width="150">
					</el-table-column>
					<!-- <el-table-column prop="areator" label="作废操作人" width="150"></el-table-column> -->
					<!-- <el-table-column prop="abolishInfo" label="作废原因" width="200"></el-table-column> -->
					<el-table-column label="线索状态" width="100">
						<template slot-scope="scope">{{ filter.filterType.clueStatus(scope.row.clueStatus) }}</template>
					</el-table-column>
					<el-table-column prop="upperName" label="上一步操作人" width="106">
					</el-table-column>
					<el-table-column prop="targetName" label="当前操作人" width="100">
					</el-table-column>
				</el-table>
				<el-pagination v-if="tableData.total" :current-page="tableData.filter.pageBean.pageIndex" :page-sizes="[tableData.sizes,tableData.sizes*2, tableData.sizes*3, tableData.sizes*4]"
				 layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="sizeChange" @current-change="currentChange"></el-pagination>
			</div>
		</div>
	</div>
</template>
<script>	
	import clue from '@/mixins/clue.js'

	export default {
		name: 'invalidClue',
		mixins: [clue],
		data() {
			return {
				ajaxType: 'queryAbolishClue'
			}
		},
		mounted() {
			this.$store.dispatch('setBreadData', [
				{
					name: '线索管理'
				},
				{
					name: '已作废线索'
				}
			]);
		},
		methods: {
			// 弹窗-提案申请
			showApplyLayer() {
				this.applyInfo.show = true;
			},
			// 弹窗-作废申请
			showInvalidLayer() {
				this.invalidInfo.show = true;
			},
			// 提案申请
			applyFor() {
				this.applyInfo.show = false;
			},
			// 作废申请
			invalidFor() {
				this.invalidInfo.show = false;
			},
			queryAbolishClue(tableData) {
				api.queryAbolishClue(tableData).then(res => {
					if (res === 'success') {

					}
				}, error => { })
			},
			// 搜索审核人
			remoteMethod(query) {
				if (query !== '') {
					this.applyInfo.loading = true;
					setTimeout(() => {
						this.loading = false;
						this.applyInfo.users = this.applyInfo.users.filter(item => {
							return item.label.toLowerCase()
								.indexOf(query.toLowerCase()) > -1;
						});
					}, 200);
				} else {
					this.applyInfo.users = [];
				}
			},
		}
	};
</script>